<!-- 改为组件模式 -->
<template>
	<view class="content">
		<z-paging ref="paging" v-if="firstLoaded || isCurrentPage" v-model="indexList" @query="queryList" :fixed="false" safe-area-inset-bottom use-safe-area-placeholder :show-loading-more-no-more-view="false" show-refresher-when-reload>
			<view :key="index" v-for="(item, index) in indexList"> 
				<view class="listitem"  @click="godetails(item.group_info)" v-if="item.group_info">
					<view class="listitem__left">
						<cl-avatar :src="item.group_info.avatar_url" size="100rpx"></cl-avatar>
					</view>
					<view class="listitem__right">
						<view class="listitem__right__top u-line-1">
							<text class="listitem__right__top__nickname">{{item.group_info.group_name}}</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		name: 'group_list',
		data() {
			return {
				indexList: [],
				
				// 当前组件是否已经加载过了
				firstLoaded: false,
				// 是否滚动到当前页
				isCurrentPage: false
			}
		},
		props:{
			// 当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			// 当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			searchval:{
				type: String,
				default: function(){
					return ''
				}
			},
		},
		computed: {
			// searchlist(){
			// 	if(this.tabIndex == this.currentIndex){
			// 		let newdata = this.indexList.filter(item => {
			// 			// 根据名字筛选
			// 			if (this.searchval && item.group_info && item.group_info.group_name.indexOf(this.searchval) === -1) {
			// 				return false;
			// 			}
			// 			return true;
			// 		});
			// 		return newdata
			// 	}
			// }
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if(newVal === this.tabIndex){
						// 懒加载，当滑动到当前的item时，才去加载
						if(!this.firstLoaded){
							// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
							this.$nextTick(() => {
								this.isCurrentPage = true;
							})
						}
					}
				},
				immediate: true
			},
			searchval: {
				handler(newVal) {
					if(this.currentIndex == this.tabIndex){
						this.$refs.paging && this.$refs.paging.reload();
					}
				}
			},
		},
		onLoad() {
		},
		methods: {
			// 接收父组件传过来的刷新列表要求
			reload() {
				this.$nextTick(() => {
					// 刷新列表数据(如果不希望列表pageNo被重置可以用refresh代替reload方法)
					this.$refs.paging && this.$refs.paging.reload();	
				})
			},
			godetails(item){
				this.$Router.push({
					name: 'chatGroupMsg',
					params: {
						group_id:item.group_id,
						group_name:item.group_name,
						avatar_url:item.avatar_url,
					}
				});
			},
			async queryList(pageNo, pageSize) {
				try{
					let res = await this.$api.groups.list({page:pageNo,limit:pageSize,keyword:this.searchval}) 
					console.log(res);
					if(res){
						this.$refs.paging.complete(res.data.list)
						this.firstLoaded = true;
					}else{
						this.$refs.paging.complete(false)
					}
				}catch(e){
					this.$refs.paging.complete(false)
				}
			}
		},
	};
</script>

<style scoped lang="scss">
	.content{
		height: 100%;
	}
	
		.listitem {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			position: relative;
			&.listitem::after {
				content: "";
				position: absolute;
				width: calc(100% - 140rpx);
				background-color: #e1e1e1;
				height: 1rpx;
				bottom: 0;
				right: 0;
			}
			&.active {
				background-color: #ffffff;
			}

			&__right {
				margin-left: 20rpx;
				flex: 1;

				&__top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					&__nickname {
						font-size: 28rpx;
					}

					&__time {
						color: #61626E;
						font-size: 20rpx;
					}
				}

				&__content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 15rpx;

					&__msg {
						flex: 1;
						font-size: 24rpx;
						color: #595A66;
					}
				}
			}
		}
</style>